Strategic
Product Transformation
Product Transformation
A global convenience store chain with 15,000+ locations was limited by a manual, single-platform systemthat lacked the scalability and cross-platform flexibility. Store associates and managers faced poor usability, fragmented communication, and disconnected workflows—leading to low engagement, inconsistent execution, and delayed decisions.
Team: 1 Senior UX/UI Designer + 2 Junior-Level UX/UI Designers
Duration: Continuous collaboration over 6 months.
Validated through cross-platform consistency and continuous weekly feedback sessions.
Achieved by streamlining communication and task management, leading to smoother workflows.
Enabled by implementing a scalable, modular design system optimized for multi-device compatibility.
Acknowledged for leadingfoundational UX researchand proposing strategic enhancements that significantly contributed to winning the project.Took charge of end-to-end design process—scoping redesigns, refining workflows, and building a modular design system. Collaborated closely with the Technology Head and Business Analyst to align with business goals, while onboarded new designers to ensure a seamless transition.
To design a scalable, cross-platform solution that unifiestask management, streamlines communication, and improvesusability across all store roles. Initial analysis of the existing system revealed low task engagement, UI clutter, device inconsistencies, and workflow inefficiencies. These insights informed the implementation ofa modular design system and responsive layouts tailored for Web, Kiosk, iPad, and Mobile platformsboosting task efficiency, enabling real-time decision-making, and increasing store team engagement.
Framing pain points into actionable goals.
| Issue Identified | Principle Violated | Impact | Occurrence | Severity |
|---|---|---|---|---|
| Header cluttered with excessive content | Aesthetic and Minimalist Design | Moderate | Frequent | 55% |
| Inconsistent presentation of the same information | Consistency and Standards | High | Frequent | 75% |
| No back navigation option on login screen while switching stores | User Control and Freedom | Moderate | Occasional | 50% |
| Lack of user notification while switching views | Visibility of System Status | Moderate | Frequent | 65% |
| Action feedback not visible post completion | Feedback and Visibility | High | Frequent | 85% |
| Error messages lack actionable guidance | Help and Documentation | High | Frequent | 70% |
Wireframes and high-fidelity designs were rapidly developed to effectively communicate the vision and design possibilities to the team, enabling quick alignment and feedback.
Delivered a walkthrough video that effectively highlighted the need for a system revamp, showcasing user pain points and strategic opportunities.It became a key part of the RFP pitch and waswell-received by both client and internal teams.
This video has been selectively edited to comply with NDA guidelines.
Following the successful proposal walkthrough, the project moved into execution. The first step was aligning with stakeholders and diving deeper into user roles, needs, and pain pointsthrough persona development.
.
To ensure decisions were rooted in real user needs, personas were developed for different associate levels.
A focused design strategy was defined byidentifying core tasks and prioritizing key functionalitiesthat required simplification or enhancement. For Phase One,the goal was to bring in minimal yet impactful enhancementswhile keeping the existing system structure largely intact. Clear user flows were mapped, and a comprehensive information architecture was developed to ensure intuitive navigation, logical content grouping, and efficient task execution across the system.
.
User Grouping Snapshot from UXtweak
User Flow for Role-Based Access generated using Whimsical
A modular design systemwas rapidly built usingMaterial UI in Figma.The system was aligned with brand guidelinesand included reusable assets and componentstailored to the application’s structure and user roles. Components were designed responsively—adjustingfont sizes, spacing, and dimensions to scale effectively across multiple devices.
.A quick look at the scalable design system built for cross-platform consistency and brand alignment.
Given the fast-paced timeline,designs were continuously refined through weekly internal reviewsto align with technical feasibility and scope limitations. Close collaboration with the Business Analyst and Development Teams ensured rapid iteration without compromising quality—aligned with brand guidelinesenabling smooth, fast-track collaboration while preventing scope creep.
.
Comparison of ineffective vs. improved message handling
Interactive prototypeswere created for mobile, desktop, kiosk, and iPad to ensure consistent behavior and responsive layouts.Final designs included clearinteraction patterns, accessibility considerations, and detailed specsfor smooth developer handoff.
.
Snapshot of interactive prototypes created for iPad device.
